<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/main.css">


    <script src="/js/jquery-2.1.4.min.js"></script>


    <!--富文本编辑器-->

    <!-- Main Quill library -->
    <link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.bubble.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/highlight.js/9.14.2/highlight.min.js"></script>
    <script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.js"></script>
    <script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.js"></script>


    <script src="/layui/layui.js"></script>
    <style>
        .lay-blog .container {
            width: 960px;
            margin: 0 auto;
        }

        #relateArticles li {
            font-size: 14px;
        }
    </style>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        .downpanel .layui-select-title span {
            line-height: 38px;
        }

        /*继承父类颜色*/
        .downpanel dl dd:hover {
            background-color: inherit;
        }
    </style>
    <style type="text/css">
        body {
            height: 100%;
            width: 100%;
            background-size: cover;
            margin: 0 auto;
        }

        td {
            font-size: 12px !important;
        }

        .layui-form-checkbox span {
            height: 30px;
        }

        table {
            width: 100% !important;
        }


        ul.left-nav li {
            border-left-color: #23b8ff;
        }

        ul.left-nav li:hover {
            background-color: rgba(100, 100, 100, 0.3) !important;
        }

        ul.left-nav li.active {
            background-color: #eaeaea;
            border-left: 5px solid;
            border-left-color: #23b8ff;
        }

        ul.left-nav a {
            color: black !important;
        }

        ul.left-nav a:hover {
            color: #23b8ff !important;
        }

        .icon-cursor:hover {
            cursor: pointer;
        }

        /* 表单样式 */
        .outline-form {
            background-color: white;
            padding: 25px 100px;
            margin-bottom: 30px;
        }

    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>

<div class="container-wrap" style="">
    <div class="container" style="width: 1080px;">
        <div class="main">
            <div style="background-color: white; padding: 20px 50px 20px 0; margin-bottom:20px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" id="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div>
                <div id="standalone-container" style="background-color: rgba(100,100,100,0.1)">
                    <div id="toolbar-container">
                        <span class="ql-formats">
                            <select class="ql-font"></select>
                            <select class="ql-size"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                            <button class="ql-strike"></button>
                        </span>
                        <span class="ql-formats">
                            <select class="ql-color"></select>
                            <select class="ql-background"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-script" value="sub"></button>
                            <button class="ql-script" value="super"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-header" value="1"></button>
                            <button class="ql-header" value="2"></button>
                            <button class="ql-blockquote"></button>
                            <button class="ql-code-block"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-list" value="ordered"></button>
                            <button class="ql-list" value="bullet"></button>
                            <button class="ql-indent" value="-1"></button>
                            <button class="ql-indent" value="+1"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-direction" value="rtl"></button>
                            <select class="ql-align"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-link"></button>
                            <button class="ql-image"></button>
                            <button class="ql-video"></button>
                            <button class="ql-formula"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-clean"></button>
                        </span>
                    </div>
                    <div id="editor" style="background-color: white; height: 500px;">
                        <p>Hello World!</p>
                        <p>Some initial <strong>bold</strong> text</p>
                        <p><br></p>
                    </div>
                </div>
            </div>

            <div style="background-color: white; padding: 20px;margin-top: 20px;">
                <div class="" style="">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" id="submit_article">保存</button>
                    <!--<button class="layui-btn layui-btn-primary" onclick="">预览</button>-->
                </div>
            </div>

        </div>
    </div>


    <!-- Initialize Quill editor -->
    <script>

        var quill = new Quill('#editor', {
            modules: {
                syntax: true,
                toolbar: '#toolbar-container'
            },
            theme: 'snow'
        });

        function preview() {
            var url = "/teacher/article/preview"
        }


        // 内容初始化
        var param = document.location.href.split('?')[1];
        var id = param.split('=')[1];
        $.ajax({
            url: '/api/article/'+id,
            type: 'get',
            success: (res) => {
                if(res.success == true){
                    $('#title').val(res.data.title);
                    quill.root.innerHTML = res.data.content;
                }
            }
        })

        layui.use('layer', function (layer) {
            $('#submit_article').on('click', function () {
                var title = $('#title').val()
                var content = quill.root.innerHTML;
                if(title==''){
                    layer.msg('标题不能为空', {icon:2})
                    return;
                }
                if(content == ''){
                    layer.msg('文章内容不能为空', {icon:2})
                    return
                }
                layer.confirm('是否要上传?', {icon: 3, title: '提示'}, function (index) {
                    //do something
                    $.ajax({
                        url: '/api/article/'+id,
                        type: 'put',
                        data: {title: title, html: content},
                        success: function (res) {
                            console.log(res)
                            if(res.code==0){
                                layer.msg('保存成功', {icon: 6})
                                window.location.href = '/teacher/article/details.html?id=' + res.data.id;
                            }else{
                                layer.msg(res.msg, {icon: 2})
                            }

                        },
                        error: function () {
                            layer.msg('系统繁忙', {icon: 5})
                        }
                    })
                    layer.close(index);
                });
            })
        })

    </script>
</div>
</div>
<div th:include="/teacher/templates::footer"></div>
</body>
<script src="/vue/vue.js"></script>
</html>